<template>
  <div class="home-container">
    <!-- 吸顶部分（红色区域）- 只包含导航栏 -->
    <div class="sticky-header">
      <nav-bar />
    </div>

    <!-- 内容区域（蓝色框内可滚动） -->
    <div class="scrollable-content">
      <tab-menu />
    </div>

    <tab-bar />
  </div>
</template>

<script setup>
import NavBar from '@/components/home/NavBar.vue'
import TabMenu from '@/components/home/TabMenu.vue'
import TabBar from '@/components/TabBar.vue'

import { useHead } from '@unhead/vue'

useHead({
  title: '首页-豆果美食(parody)',
  meta: [{ name: 'description', content: '豆果美食(parody)仿站首页' }],
})
</script>

<style scoped>
.home-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.sticky-header {
  flex-shrink: 0;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
</style>
